<template>
  <button class="chip" v-bind="$attrs">普通纸片</button>

  <hr />
  <h6>{{ $attrs }}</h6>

  <ul>
    <li>{{ $attrs.title }}</li>
    <li>{{ $attrs.class }}</li>
    <li>{{ $attrs.style }}</li>
  </ul>
  <button @click="$attrs.onClick()">执行透传的事件</button>

  <hr />
  <button @click="showAttrs">在 JS 中访问透传的属性和事件</button>
</template>

<script>
export default {
  methods: {
    showAttrs() {
      // 在 JS 中访问透传的属性和事件
      console.log(this.$attrs)
      console.log(this.$attrs.class)
      console.log(this.$attrs.title)
      console.log(this.$attrs.style)
      this.$attrs.onClick()
    },
  },
}
</script>

<style scoped>
.chip {
  border: none;
  background-color: rgb(231, 231, 231);
  padding: 8px 15px;
  margin: 10px;
}

.rounded {
  border-radius: 100px;
}
</style>
